<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset='utf-8'>
  <link href="../css/zui.min.css" rel="stylesheet">
  <link href="../css/example.css" rel="stylesheet">

  <script src="../../assets/jquery.js"></script>
  <script src="../js/zui.js"></script>
  <script src="../../assets/google-code-prettify/prettify.js"></script>


  <link href="../css/example.css" rel="stylesheet">
  <style>.example > .modal {display: block; position: static;}</style>
  <script src="../assets/js/example.js"></script>
  <script>
$(function()
{
    $('#jsHideModal').click(function()
    {
        $('#myModal').modal('hide');
    });
});
  </script>
</head>
<body>
<article>
  <section id='modals' class="page-section">
    <h1>模态框</h1>
    <p></p>
    <h3>实例</h3>
    <p>模态框允许已对话框的形式弹出，有半透明的页面遮罩层，并在显示和隐藏时支持动画。</p>
    <h4>静态实例</h4>
    <div class="example">
      <div class="modal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
              <h4 class="modal-title">标题</h4>
            </div>
            <div class="modal-body">
              <p>主题内容...</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary">保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <pre class='prettyprint'><code>&lt;div class=&quot;modal fade&quot;&gt;
  &lt;div class=&quot;modal-dialog&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      &lt;div class=&quot;modal-header&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;&lt;span class=&quot;sr-only&quot;&gt;关闭&lt;/span&gt;&lt;/button&gt;
        &lt;h4 class=&quot;modal-title&quot;&gt;标题&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-body&quot;&gt;
        &lt;p&gt;主题内容...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;关闭&lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;保存&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
    <h4>动态实例</h4>
    <p>点击按钮通过Javascript来启动一个模态框。</p>
    <div class="example">
      <button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal" data-moveable='true'>启动模态框</button>
    </div>
    <pre class='prettyprint'><code>&lt;!-- 模态框触发按钮 --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-lg btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;启动模态框&lt;/button&gt;

&lt;!-- 模态框HTML --&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot;&gt;
  &lt;div class=&quot;modal-dialog&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

    <h4>决定模态框位置</h4>
    <p>默认情况下模态框会根据自身内容高度展示在页面中心稍靠上方的位置。通过一些参数可以重新决定模态框的展现位置（具体参数参考“如何使用”章节）。</p>
    <div class="example">
      <button type="button" class="btn btn-primary" data-position="fit" data-toggle="modal" data-target="#myModal">默认位置</button>
      <button type="button" class="btn btn-primary" data-position="center" data-toggle="modal" data-target="#myModal">窗口中间</button>
      <button type="button" class="btn btn-primary" data-position="" data-toggle="modal" data-target="#myModal">靠近上方</button>
      <button type="button" class="btn btn-primary" data-position="100px" data-toggle="modal" data-target="#myModal">距离上方100px</button>
    </div>
<pre class='prettyprint'><code>&lt;button type=&quot;button&quot; class=&quot;btn&quot; data-position=&quot;fit&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;默认位置&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot; data-position=&quot;center&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;窗口中间&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot; data-position=&quot;&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;靠近上方&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot; data-position=&quot;100px&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;距离上方100px&lt;/button&gt;</code></pre>

    <h4>更改模态框的大小</h4>
    <p>模态框的默认宽度为<code>600px</code>，你可以通过为<code>.modal-dialog</code>应用CSS样式来更改模态框的宽度。在ZUI中也提供了额外两种预设的宽度，通过为<code>.modal-dialog</code>添加CSS类名来调整实现：</p>
    <ul>
      <li>大模态框：添加<code>.modal-lg</code>CSS类名，宽度为<code>900px</code>；</li>
      <li>小模态框：添加<code>.modal-sm</code>CSS类名，宽度为<code>300px</code>。</li>
    </ul>
    <div class="example">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myLgModal">大模态框</button>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mySmModal">小模态框</button>
    </div>
    <pre class='prettyprint'><code>&lt;!-- 大模态框 --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myLgModal&quot;&gt;大模态框&lt;/button&gt;

&lt;div class=&quot;modal fade&quot; id=&quot;myLgModal&quot;&gt;
  &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- 小模态框 --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#mySmModal&quot;&gt;小模态框&lt;/button&gt;

&lt;div class=&quot;modal fade&quot; id=&quot;mySmModal&quot;&gt;
  &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

    <h4>禁用动画效果</h4>
    <p>模态框在弹出或隐藏时会伴随动画效果（淡入淡出效果），如果不需要，只需要移除<code>.modal</code>标签上的<code>.fade</code>类即可。</p>
    <div class="example">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fastModal">立即展现</button>
    </div>
    <pre class='prettyprint'><code>&lt;!-- 禁用动画效果的模态框 --&gt;
&lt;div class=&quot;modal&quot;&gt;
...
&lt;/div&gt;
</code></pre>

    <h4>关闭模态框</h4>
    <p>在静态模态框HTML中增加一个按钮并添加data属性<code>data-dismiss="modal"</code>，这样当点击该按钮时会关闭此对话框。你可以将该属性添加至模态框内的任何元素。</p>
    <pre class='prettyprint'><code>&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;&lt;span class=&quot;sr-only&quot;&gt;关闭&lt;/span&gt;&lt;/button&gt;</code></pre>

    <h3>如何使用</h3>
    <h4>使用data属性</h4>
    <p>一般情况下不需要手动调用Javascript来使用模态框，只需要在触发模态框的按钮或链接上增加两个额外的data属性即可：<code>data-toggle="modal"</code>和<code>data-target="#myModal"</code>。</p>
    <p>其中<code>data-toggle</code>属性声明该按钮或链接点击后会显示或隐藏模态框。<code>data-target</code>属性指明静态模态框的ID属性。</p>
    <p>如果使用<code>&lt;a&gt;</code>触发模态框，可以直接将静态模块框的ID写在<code>href</code>属性内，<code>data-target</code>属性则可以忽略。</p>
    <p>使用data属性也可以来为对话框提供其他参数。</p>
    <pre class='prettyprint'><code>&lt;!-- 使用按钮 --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;启动模态框&lt;/button&gt;

&lt;!-- 使用超链接 --&gt;
&lt;a data-toggle=&quot;modal&quot; href=&quot;#myModal&quot;&gt;启动模态框&lt;/a&gt;</code></pre>

    <h4>手动调用Javascript</h4>
    <p>不使用按钮或链接来触发模态框也可以使用Javascript来手动触发。</p>
    <pre class='prettyprint'><code>$('#myModal').modal(options)</code></pre>

    <h4>参数</h4>
    <p>参数既可以在手动调用的时候指定，也可以在静态模态框或者触发器上使用data属性来指定。</p>
    <p>可用的参数如下：</p>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>参数</th>
          <th style="width: 80px">名称</th>
          <th style="width: 300px">可选值</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>backdrop</code></td>
          <td>背景遮罩</td>
          <td>
            <ul>
              <li><code>'static'</code></li>
              <li><code>true</code>（默认）</li>
              <li><code>false</code></li>
            </ul>
          </td>
          <td>使用布尔值来启用或禁用背景遮罩，如果指定为<code>'static'</code>则会启动背景遮罩，但点击背景遮罩时不会触发关闭模态框的过程。</td>
        </tr>
        <tr>
          <td><code>keyboard</code></td>
          <td>按键</td>
          <td>
            <ul>
              <li><code>true</code>（默认）</li>
              <li><code>false</code></li>
            </ul>
          </td>
          <td>当为<code>ture</code>时，按下<code>esc</code>键会关闭模态框。</td>
        </tr>
        <tr>
          <td><code>show</code></td>
          <td>立即显示</td>
          <td>
            <ul>
              <li><code>true</code>（默认）</li>
              <li><code>false</code></li>
            </ul>
          </td>
          <td>是否在模态框初始化之后立即显示出来。</td>
        </tr>
        <tr>
          <td><code>position</code></td>
          <td>
            显示位置
          </td>
          <td>
            <ul>
              <li><code>'fit'</code>（默认），最佳位置；</li>
              <li><code>'center'</code>，显示在窗口中间；</li>
              <li><code>''</code>，显示在最顶部；</li>
              <li><code>200</code>，数字用来指定距离顶部的像素；</li>
              <li>CSS支持的所有表示位置的值，用来指定距离顶部的偏移；</li>
            </ul>
          </td>
          <td>默认位置是在窗口中部稍偏上的地方。</td>
        </tr>
      </tbody>
    </table>

    <h4>方法</h4>
    <h5>.modal(options)</h5>
    <p>使用参数对象来初始化模态框。</p>
    <pre class='prettyprint'><code>$('#myModal').modal(
{
    keyboard : false,
    show     : true
})</code></pre>

    <h5>.modal('toggle', position)</h5>
    <p>手动显示或隐藏模态框。<code>position</code>参数为可选的，用来指定显示的位置。</p>
    <pre class='prettyprint'><code>$('#myModal').modal('toggle', 'center')</code></pre>

    <h5>.modal('show', position)</h5>
    <p>手动显示模态框。<code>position</code>参数为可选的，用来指定显示的位置。</p>
    <pre class='prettyprint'><code>$('#myModal').modal('show', 'fit')</code></pre>

    <h5>.modal('hide', position)</h5>
    <p>手动隐藏模态框。<code>position</code>参数为可选的，用来指定显示的位置。</p>
    <pre class='prettyprint'><code>$('#myModal').modal('hide', 'fit')</code></pre>

    <h5>.modal('ajustPosition', position)</h5>
    <p>手动重新调整模态框显示位置。<code>position</code>参数为可选的，用来指定显示的位置。</p>
    <pre class='prettyprint'><code>$('#myModal').modal('ajustPosition', 'fit')</code></pre>

    <h4>事件</h4>
    <p>模态框提供了一系列事件用于监听模态框运行状态，便于在合适的时机运行你自己的代码。</p>
    <table class="table table-bordered">
      <thead>
       <tr>
         <th style="width: 80px;">事件</th>
         <th>描述</th>
       </tr>
      </thead>
      <tbody>
       <tr>
         <td><code>show.zui.modal</code></td>
         <td>当<code>show</code>方法被调用时，此事件将被立即触发。</td>
       </tr>
       <tr>
         <td><code>shown.zui.modal</code></td>
         <td>当模态对话框呈现到用户面前时（会等待过渡效果执行结束）此事件被触发。</td>
       </tr>
       <tr>
         <td><code>hide.zui.modal</code></td>
         <td>当<code>hide</code>方法被调用时，此事件将被立即触发。</td>
       </tr>
       <tr>
         <td><code>hidden.zui.modal</code></td>
         <td>当模态对话框被隐藏（而且过渡效果执行完毕）之后，此事件将被触发。</td>
       </tr>
       <tr>
         <td><code>escaping.zui.modal</code></td>
         <td>当用户按下<code>esc</code>键来关闭对话框之前会调用此方法，如果在事件回调函数中返回<code>false</code>，则会终止对话框关闭过程。</td>
       </tr>
      </tbody>
    </table>
    <p>监听事件使用jQuery的on方法：</p>
        <pre class='prettyprint'><code>$('#myModal').on('shown.zui.modal', function()
{
  alert('对话框已显示。');
})</code></pre>

    <h4>使用要点</h4>
    <ul>
      <li>不能在一个模态框上重叠另一个模态框，也不支持在遮罩层同时显示两个以上的模态框；</li>
      <li>静态模态框的HTML代码应该放在文档最高层级内，作为<code>&lt;body&gt;</code>的直接子元素，以避免与文档中的其他组件冲突；</li>
      <li>模态框继承自Bootstrap模态框(v3.2)，包含其所有功能和接口。参考：<a target="_blank" href="http://getbootstrap.com/javascript/#modals">英</a>，<a target="_blank" href="http://v3.bootcss.com/javascript/#modals">中</a>。</li>
    </ul>



    <h3>类型</h3>
    <h4>基本类型</h4>
    <p>启动方式一：通过在一个起控制器作用的页面元素（例如，按钮）上设置data-toggle="modal"，并使用data-target="#foo"或href="#foo"指向特定的模态框即可。</p>
    <p>启动方式二：只需一行JavaScript代码，即可通过id myModal调用模态框： $('#myModal').modal(options) </p>
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">实例</button>

    <h4>框架对话框触发器</h4>
    <a href="alerts.html" data-type='iframe' data-toggle='modal' class='btn btn-success'><i class='icon-heart'></i> 打开框架对话框</a>
    <br>
    <a href="partial/dialog.html" data-type='ajax' data-toggle='modal' class='btn btn-success'><i class='icon-heart'></i> 打开ajax对话框</a>

    <a href="partial/dialog.html" data-type='ajax' data-toggle='modal' class='btn btn-success' data-size='fullscreen'><i class='icon-heart'></i> 打开全屏的ajax对话框</a>

    <a href="http://www.kuaidi100.com/frame/790px.html" data-type='iframe' data-toggle='modal' class='btn btn-success' data-width="600" data-height="750"><i class='icon-heart'></i> 跨域远程内容</a>

    <h3>变化</h3>
    <h4>选项</h4>
    <p>aria-labelledby="myModalTitle"属性指向模态框标题。</p>
    <p>aria-hidden="true"告诉辅助性工具略过模态框的DOM元素。</p>
    <p>aria-describedby='myModelBody'属性用以指向描述信息。</p>
    <p>通过对div.modal增加data-*选项来改变模态对话框。或通过js改变$('#myModal').modal({ keyboard: false })</p>
    <table class="table table-bordered table-striped">
      <thead>
       <tr>
         <th style="width: 80px;">名称</th>
         <th style="width: 80px;">类型</th>
         <th style="width: 80px;">默认值</th>
         <th>描述</th>
       </tr>
      </thead>
      <tbody>
       <tr>
         <td>backdrop</td>
         <td>boolean/static</td>
         <td>true</td>
         <td>
           <p><code>true</code>时，添加一个背景元素，且点击外部区域将其关闭。</p>
           <p><code>false</code>时，不会添加背景元素，且点击外部区域不会关闭。</p>
           <p><code>static</code>时，添加一个背景元素，且点击外部区域不会关闭。</p>
         </td>
       </tr>
       <tr>
         <td>keyboard</td>
         <td>boolean</td>
         <td>true</td>
         <td>
           <p><code>true</code>时，按esc键关闭模态框。</p>
           <p><code>false</code>时，按esc不会关闭模态框。</p>
         </td>
       </tr>
       <tr>
         <td>show</td>
         <td>boolean</td>
         <td>true</td>
         <td>
           <p><code>true</code>时，初始化时即显示模态对话框。</p>
           <p><code>true</code>时，初始化时不显示模态对话框。</p>
         </td>
       </tr>
       <tr>
         <td>remote</td>
         <td>path</td>
         <td>false</td>
         <td><p>如果提供了远程url地址，就会通过 jQuery的<code>load</code>方法加载内容并注入到<code>.modal-body</code>中。如果你使用的是data属性api，你还可以使用<code>href</code>标签指定远程数据源。 </p></td>
       </tr>
      </tbody>
    </table>
    <h4>方法和事件</h4>
    <table class="table table-bordered table-striped">
      <thead>
       <tr>
         <th style="width: 80px;">方法</th>
         <th>例子</th>
         <th>描述</th>
       </tr>
      </thead>
      <tbody>
       <tr>
         <td>.modal(options)</td>
         <td><code>$('#myModal').modal({ keyboard: false })</code></td>
         <td>让你指定的内容变成一个模态对话框。接受一个可选的参数object.</td>
       </tr>
       <tr>
         <td>.modal('toggle')</td>
         <td><code>$('#myModal').modal('toggle')</code></td>
         <td>手动打开或隐藏一个模态对话框。</td>
       </tr>
       <tr>
         <td>.modal('show')</td>
         <td><code>$('#myModal').modal('show')</code></td>
         <td>手动打开一个模态对话框。</td>
       </tr>
       <tr>
         <td>.modal('hide')</td>
         <td><code>$('#myModal').modal('hide')</code></td>
         <td>手动隐藏一个模态对话框。</td>
       </tr>
      </tbody>
    </table>


    <h4>改变模态框大小</h4>
    <p>通过重新定义.modal-dialog宽度<code>.modal-dialog {width:*}</code>来改变模态框大小</p>
    <style>#resizedModal .modal-dialog{width:50%;}</style>
    <button class="btn btn-primary" data-toggle="modal" data-target="#resizedModal">width:50%</button>
    <div class="modal" id="resizedModal" tabindex="-1" role="dialog" aria-labelledby="resizedModalTitle" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="resizedModalTitle"> 标题 </h4>
          </div>
          <div class="modal-body">
            <h5>通过重新定义.modal-dialog宽度<code>.modal-dialog {width:*}</code>来改变模态框大小</h5>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <h4>载入效果</h4>
    <p>目前有div.modal.fade和div.modal.in效果，需要<a target='_blank' href='http://v2.bootcss.com/javascript.html#transitions'>transition.js</a>支持。</p>
    <button class="btn btn-primary" data-toggle="modal" data-target="#tsModal">fade效果</button>
    <div class="modal fade" id="tsModal" tabindex="-1" role="dialog" aria-labelledby="tsModalTitle" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="tsModalTitle">标题</h4>
          </div>
          <div class="modal-body">
            <p>目前有div.modal.fade和div.modal.in效果，需要<a target='_blank' href='http://v2.bootcss.com/javascript.html#transitions'>transition.js</a>支持。</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <h4>载入远程内容</h4>
    <button class="btn btn-primary" id="loadRemote">弹出框测试</button>
    <div class="modal fade" id="remoteDialog" tabindex="-1" role="dialog" aria-labelledby="tsModalTitle" aria-hidden="true">
    </div><!-- /.modal -->
    <script>
    $(function()
    {
        prettyPrint();

        // window.onbeforeunload = function(){return 'fdsfd'};
    })
    </script>
  </section>
</article>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
        <h4 class="modal-title">对话框标题</h4>
      </div>
      <div class="modal-body">
        <h4>虞美人·春花秋月何时了 <small>五代·李煜</small></h4>
        <p>春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。<br>雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn" id="jsHideModal">测试.modal('hide')</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myLgModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
        <h4 class="modal-title">大模态框</h4>
      </div>
      <div class="modal-body">...</div>
    </div>
  </div>
</div>

<div class="modal fade" id="mySmModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
        <h4 class="modal-title">小模态框</h4>
      </div>
      <div class="modal-body">...</div>
    </div>
  </div>
</div>

<div class="modal" id="fastModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
        <h4 class="modal-title">禁用动画效果演示</h4>
      </div>
      <div class="modal-body">...</div>
    </div>
  </div>
</div>
  </body>
</html>

